<template>
    <div class="main">
        <el-form :model="searchValue1" class="detail">
            <!-- 标题 -->
            <el-form-item prop="title">
                <el-input type="text" placeholder="请输入标题" style="width: 15.625rem; height: 2rem"
                    v-model="searchValue1.title" />
            </el-form-item>
            <!-- 文章大类 -->
            <el-form-item prop="type">
                <el-select placeholder="请选择文章类别" class="select" v-model="searchValue1.type">
                    <el-option v-for="item in type_options" :key="item.value" :label="item.lable" :value="item.value" />
                </el-select>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item prop="title">
                <el-select placeholder="请选择文章状态" class="select" v-model="searchValue1.status">
                    <el-option v-for="item in status_options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn" class="solid" style="margin-top: 0.0625rem;">搜索</el-button>
                <el-button type="primary" @click="reset" class="hollow" style="margin-top: 0.0625rem;">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Details } from '@/hooks/components/Details.ts'
import { RequestAllArticle } from '@/api/path/index.js'
const emit = defineEmits(['searchBtn', 'changeSearchValue']) //子组件接收事件
const { type_options, status_options } = Details()
const tableData = ref([])
const total = ref(0)

const props = defineProps({
    searchValue1: Array,
});
const reset = () => {
    emit('changeSearchValue', {
        title: '',
        type: '',
        status: '',
    }) //子组件触发事件
}
/**
 * 搜索列表
 */
const searchBtn = async () => {
    const a = await RequestAllArticle(props.searchValue1)
    tableData.value = a.resultObj.articles
    total.value = a.resultObj.totalCount
    for (let i = 0; i < tableData.value.length; i++) {
        tableData.value[i].createdAt =
            tableData.value[i].createdAt.slice(0, 10) +
            ' ' +
            ' ' +
            tableData.value[i].createdAt.slice(11, 16)
    }
    // const paramsD = {}
    // paramsD._m = 'testFetch'
    // paramsD.params = JSON.stringify(paramValue.value)
    // const a = await d2jsApi('post', '/car/article.d2js', paramsD)
    // searchList.value = a.rows
    emit('searchBtn', tableData.value, total.value) //子组件触发事件
    // searchValue.value = []
    // paramValue.value = { page: 1, size: 5 }
}
</script>

<style scoped lang="scss">
.main {
    height: 4.375rem;
    display: flex;
    align-items: center;
    margin-left: 1.6%;
    position: relative;

    .detail {
        height: 4.375rem;
        display: flex;
        align-items: center;
        position: relative;

        .select {
            width: 15.625rem;
            margin: 0 1.25rem;
        }

        .el-tag {
            height: 2rem;
            margin-left: 0.3125rem;
        }

        .el-button {
            width: 6.25rem;
            height: 2rem;
        }
    }

    .search {
        width: 5rem;
        height: 2rem;
        position: absolute;
        right: 1.25rem;
        top: 0.625rem;
        background: #409eff;
        color: white;
        border: 0;
        border-radius: 0.3125rem;
    }
}
</style>
